/**
 * $ npm install -S react-router
 * 
 */

 /**
  * import { Router } from 'react-router';
  */

/**
 * 【嵌套路由】
 * 
 * <Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>
        </Route>
    </Router>

    // App组件要写成下面的样子。
    // this.props.children属性就是子组件
    export default React.createClass({
        render() {
            return <div>
                {this.props.children} //路由内容content区域
            </div>
        }
    })


    // 子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。
    let routes = <Route path="/" component={App}>
        <Route path="/repos" component={Repos}/>
        <Route path="/about" component={About}/>
    </Route>;
    <Router routes={routes} history={browserHistory}/>
 */

 /**
  * 【path 属性】
  * 
  * // Route组件的path属性指定路由的匹配规则。这个属性是可以省略的，
  * //这样的话，不管路径是否匹配，总是会加载指定组件。
  * 
  * <Route path="/hello/:name">
  * 这个路径参数可以通过this.props.params.paramName取出
  * 
  * /foo?bar=baz
  * 用this.props.location.query.bar获取。
  * 
  * path属性也可以使用相对路径（不以/开头），匹配时就会相对于父组件的路径
  * 嵌套路由如果想摆脱这个规则，可以使用绝对路由。
  */

/**
 * 【IndexRoute 组件】
 * 主要针对嵌套路由时
 * <Router>
        <Route path="/" component={App}>
            <Route path="accounts" component={Accounts}/>
            <Route path="statements" component={Statements}/>
        </Route>
    </Router>
    // 访问根路径/，不会加载任何子组件。也就是说，App组件的this.props.children，这时是undefined
    // 因此，通常会采用{this.props.children || <Home/>}这样的写法。
    // 这时，Home明明是Accounts和Statements的同级组件，却没有写在Route中。

    // IndexRoute就是解决这个问题，显式指定Home是根路由的子组件，即指定默认情况下加载的子组件。
    // 你可以把IndexRoute想象成某个路径的index.html。
    // 注意：IndexRoute组件没有路径参数path。
 *   <Router>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="accounts" component={Accounts}/>
            <Route path="statements" component={Statements}/>
        </Route>
    </Router>
 *
 */

 /**
  * 【Redirect 组件】
  * 
  * // <Redirect>组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
  * 
  * 从 /inbox/messages/:id 跳转到 /messages/:id
  * <Route path="inbox" component={Inbox}> 
        ＜Redirect from="messages/:id" to="/messages/:id" />
    </Route>
    现在访问/inbox/messages/5，会自动跳转到/messages/5。
  */

  /**
   * 【Link】
   * 
   * // Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由
   * 
   * 如果希望当前的路由与其他路由有不同样式，这时可以使用Link组件的activeStyle属性。
     <Link to="/about" activeStyle={{color: 'red'}}>About</Link>
     <Link to="/repos" activeStyle={{color: 'red'}}>Repos</Link>

     另一种做法是，使用activeClassName指定当前路由的Class。
     <Link to="/about" activeClassName="active">About</Link>
     <Link to="/repos" activeClassName="active">Repos</Link>

     // 注意：在Router组件之外，导航到路由页面，可以使用浏览器的History API
     import { browserHistory } from 'react-router';
     browserHistory.push('/some/path');
   * 
   */

   /**
    * 【IndexLink】
    * 
    * // 如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件
    * 这是因为对于根路由来说，activeStyle和activeClassName会失效，或者说总是生效，因为/会匹配任何子路由。
    * 而IndexLink组件会使用路径的精确匹配。
    *   <IndexLink to="/" activeClassName="active">
            Home
        </IndexLink>
    * 上面代码中，根路由只会在精确匹配时，才具有activeClassName。

       // 另一种方法是使用Link组件的onlyActiveOnIndex属性，也能达到同样效果。
        <Link to="/" activeClassName="active" onlyActiveOnIndex={true}>
           Home
        </Link>
        // 实际上，IndexLink就是对Link组件的onlyActiveOnIndex属性的包装。 
    * 
    */

    /**
     * 【histroy 属性】
     * 
     * // Router组件的history属性，用来监听浏览器地址栏的变化，
     * // 并将URL解析成一个地址对象，供 React Router 匹配。
     * 
     *  三种值：
     *  browserHistory
        hashHistory
        createMemoryHistory

        browserHistory 模式：
        但是，这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。
     * 
     * 
     */

     /**
      * 【表单处理】
      * 
      * // Link组件用于正常的用户点击跳转，但是有时还需要表单跳转、点击按钮跳转等操作
      * 
      * 表单：
      * <form onSubmit={this.handleSubmit}>
            <input type="text" placeholder="userName"/>
            <input type="text" placeholder="repo"/>
            <button type="submit">Go</button>
        </form>
      * // 第一种方法是使用browserHistory.push
        import { browserHistory } from 'react-router'
        handleSubmit(event) {
            event.preventDefault()
            const userName = event.target.elements[0].value
            const repo = event.target.elements[1].value
            const path = `/repos/${userName}/${repo}`
            browserHistory.push(path)
        },
      * 
      * // 第二种方法是使用context对象。
      * export default React.createClass({
            // ask for `router` from context
            contextTypes: {
                router: React.PropTypes.object
            },

            handleSubmit(event) {
                // ...
                this.context.router.push(path)
            },
        })
      */


      /**
       * 【路由的钩子】
       * 
       * // 每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发。
       * 
       * 
        <Route path="about" component={About} />
        ＜Route path="inbox" component={Inbox}>
            ＜Redirect from="messages/:id" to="/messages/:id" />
        </Route>
       * 
       * 如下：使用onEnter钩子替代<Redirect>组件。
       * <Route path="inbox" component={Inbox}>
            <Route path="messages/:id" onEnter={
                  ({params}, replace) => replace(`/messages/${params.id}`)
                }/>
        </Route> 

        // onEnter钩子还可以用来做认证。
        const requireAuth = (nextState, replace) => {
            if (!auth.isAdmin()) {
                // Redirect to Home page if not an Admin
                // 没认证，路由到'/'
                replace({ pathname: '/' })
            }
        }
        export const AdminRoutes = () => {
            return (
                <Route path="/admin" component={Admin} onEnter={requireAuth} />
            )
        }
       *
       */



       /**
        * 渡一教育
        * 
        */
       